<template>
  <div class="bg-form">
    <el-row style='margin-bottom: 20px'>
      <el-col :span="12">
        历史销售清单：
        <el-select
          style="width: 320px"
          v-model="form.id"
          placeholder="历史销售清单"
          @change="getDetail"
        >
          <el-option
            v-for="item in list"
            :key="item.index"
            :value="item.id"
            :label="item.applyNo"
          />
        </el-select>
      </el-col>
    </el-row>
    <el-divider content-position="center"></el-divider>
    <el-form :model="form" label-width="110px" :show-message="false" ref="form">
      <el-row>
        <el-col :span="12">申请单信息</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-row>
        <el-col :span="6">
          <el-form-item label="客户姓名:">
            <span>{{form.userName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车型:">
            <span>{{form.carModelName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车架号:">
            <span>{{form.vin}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="配置:">
            <span>{{form.configuration}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车辆指导价:">
            <span>{{form.guidePrice}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="实际成交价:">
            <span>{{form.transactionPrice}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="购买方式:">
            <span>{{form.purchaseMode == 0 ? '全款购车' : '按揭购车'}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="申请日期:">
            <span>{{form.createTime}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">开票明细</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-row>
        <el-col :span="5">
          <el-form-item label="机动车开票价:">
            <span>{{form.vehicleBillJson.billPrice}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="日期:">
            <span>{{form.vehicleBillJson.createDate}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="付款方式:">
            <span>{{form.vehicleBillJson.paymentMode}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="金额:">
            <span>{{form.vehicleBillJson.amount}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="收款人:">
            <span>{{form.vehicleBillJson.payee}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item label="精品开票价:">
            <span>{{form.boutiqueBillJson.billPrice}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="日期:">
            <span>{{form.boutiqueBillJson.createDate}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="付款方式:">
            <span>{{form.boutiqueBillJson.paymentMode}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="金额:">
            <span>{{form.boutiqueBillJson.amount}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="收款人:">
            <span>{{form.boutiqueBillJson.payee}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item label="配件开票价:">
            <span>{{form.accessoriesBillJson.billPrice}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="日期:">
            <span>{{form.accessoriesBillJson.createDate}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="付款方式:">
            <span>{{form.accessoriesBillJson.paymentMode}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="金额:">
            <span>{{form.accessoriesBillJson.amount}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="收款人:">
            <span>{{form.accessoriesBillJson.payee}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">按揭明细</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-row>
        <el-col :span="5">
          <el-form-item label="首付车款:">
            <span>{{form.downPaymentJson.billPrice}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="日期:">
            <span>{{form.downPaymentJson.createDate}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="付款方式:">
            <span>{{form.downPaymentJson.paymentMode}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="金额:">
            <span>{{form.downPaymentJson.amount}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="收款人:">
            <span>{{form.downPaymentJson.payee}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item label="贷款金额:">
            <span>{{form.goodsAmountJson.billPrice}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="日期:">
            <span>{{form.goodsAmountJson.createDate}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="付款方式:">
            <span>{{form.goodsAmountJson.paymentMode}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="金额:">
            <span>{{form.goodsAmountJson.amount}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="收款人:">
            <span>{{form.goodsAmountJson.payee}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item label="利息:">
            <span>{{form.interestJson.billPrice}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="日期:">
            <span>{{form.interestJson.createDate}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="付款方式:">
            <span>{{form.interestJson.paymentMode}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="金额:">
            <span>{{form.interestJson.amount}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="收款人:">
            <span>{{form.interestJson.payee}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item label="手续费:">
            <span>{{form.chargesJson.billPrice}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="日期:">
            <span>{{form.chargesJson.createDate}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="付款方式:">
            <span>{{form.chargesJson.paymentMode}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="金额:">
            <span>{{form.chargesJson.amount}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="收款人:">
            <span>{{form.chargesJson.payee}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">保险明细</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-row>
        <el-col :span="5">
          <el-form-item label="保险:">
            <span>{{form.insuranceJson.billPrice}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="日期">
            <span>{{form.insuranceJson.createDate}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="付款方式:">
            <span>{{form.insuranceJson.paymentMode}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="金额:">
            <span>{{form.insuranceJson.amount}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="收款人:">
            <span>{{form.insuranceJson.payee}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item label="续保保证金:">
            <span>{{form.moreDepositJson.billPrice}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="日期:">
            <span>{{form.moreDepositJson.createDate}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="付款方式:">
            <span>{{form.moreDepositJson.paymentMode}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="金额:">
            <span>{{form.moreDepositJson.amount}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="收款人:">
            <span>{{form.moreDepositJson.payee}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">代办上牌</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-row>
        <el-col :span="5">
          <el-form-item label="购置税:">
            <span>{{form.purchaseTaxJson.billPrice}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="日期:">
            <span>{{form.purchaseTaxJson.createDate}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="付款方式:">
            <span>{{form.purchaseTaxJson.paymentMode}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="金额:">
            <span>{{form.purchaseTaxJson.amount}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="收款人:">
            <span>{{form.purchaseTaxJson.payee}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item label="上牌税:">
            <span>{{form.licenseFeeJson.billPrice}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="日期:">
            <span>{{form.licenseFeeJson.createDate}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="付款方式:">
            <span>{{form.licenseFeeJson.paymentMode}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="金额:">
            <span>{{form.licenseFeeJson.amount}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="收款人:">
            <span>{{form.licenseFeeJson.payee}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item label="路桥费:">
            <span>{{form.roadBridgeFeeJson.billPrice}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="日期:">
            <span>{{form.roadBridgeFeeJson.createDate}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="付款方式:">
            <span>{{form.roadBridgeFeeJson.paymentMode}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="金额:">
            <span>{{form.roadBridgeFeeJson.amount}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="收款人:">
            <span>{{form.roadBridgeFeeJson.payee}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">其他</el-col>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-col :span="24">
            <el-form-item label=" " label-width='0px'>
              <span>{{form.code}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { saleApplyList, saleApplyDetail } from '@/api/pre-sale/orderManagement/newCar'
export default {
  data() {
    return {
      form: {
        accessoriesBillJson: {},
        boutiqueBillJson: {},
        chargesJson: {},
        downPaymentJson: {},
        goodsAmountJson: {},
        insuranceJson: {},
        interestJson: {},
        licenseFeeJson: {},
        moreDepositJson: {},
        purchaseTaxJson: {},
        roadBridgeFeeJson: {},
        vehicleBillJson: {},
      },
      list: []
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList(){
      await saleApplyList(this.$route.query.id).then((res) => {
        const { success, data } = res
        if (success) {
          this.list = data;
          if (data.length > 0) {
            this.form.id = data[0].id;
            this.getDetail(this.form.id);
          }
        }
      })
    },
    async getDetail(saleApplyId) {
      await saleApplyDetail(saleApplyId).then((res) => {
        const { success, data } = res
        if (success) {
          this.form = {
            ...this.form,
            ...data
          }
        }
      })
    }
  }

}
</script>
<style lang="scss" scoped>
.bg-form {
  background: #ffffff;
  padding: 20px;
}
</style>

